<template>
	<div>
		<ReturnCloseNavbar left_arrow />
		<div class="title">
			<span class="font-size-26">修改密码</span>
		</div>
		<div class="form">
			<van-form validate-first @submit="onSubmit" @failed="onFailed">
				<van-field
					v-model="old_password"
					name="old_password"
					placeholder="请输入旧密码"
					maxlength="20"
					clearable
					error-message-align="right"
					:rules="[
						{ required: true, message: '请输入旧密码' },
						{ validator: validatorPatternPassword, message: '密码格式不正确' },
					]"
				/>
				<van-field
					v-model="new_password"
					name="new_password"
					placeholder="请输入新密码"
					maxlength="20"
					clearable
					error-message-align="right"
					:rules="[
						{ required: true, message: '请输入新密码' },
						{ validator: validatorPatternPassword, message: '密码格式不正确' },
					]"
				/>
				<van-field
					v-model="new_check_password"
					name="new_check_password"
					placeholder="请确认输入新密码"
					maxlength="20"
					clearable
					error-message-align="right"
					:rules="[
						{ required: true, message: '请确认输入新密码' },
						{ validator: validatorPatternPassword, message: '密码格式不正确' },
					]"
				/>
				<div class="forget-old-password-button">
					<p class="font-size-12" @click="goSetNewPassword">忘记旧密码？</p>
				</div>
				<div class="submit-button">
					<van-button round block type="default" native-type="submit">确定</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
import Agreement from './components/Agreement';
import ReturnCloseNavbar from './components/ReturnCloseNavbar';
import cookie from '@/utils/cookie';
import md5 from 'js-md5';

export default {
	name: 'index',
	props: {},
	data() {
		return {
			phone_number: '', //当前用户手机号
			old_password: '', //旧密码
			new_password: '', //新密码
			new_check_password: '', //再次新密码
			pattern_password: /^\w{6,15}$/, //密码校验正则
		};
	},
	components: {
		Agreement,
		ReturnCloseNavbar,
	},
	computed: {},
	mounted() {
		this.phone_number = JSON.parse(cookie.get('userLogin')).phonenum;
	},
	methods: {
		onSubmit(values) { //修改密码
			if (this.new_password !== this.new_check_password) {
				this.$toast.fail('两次输入的新密码不一致');
				return;
			}
			_api
				.api_userPortal_updatePassword({
					phone: this.phone_number,
					old_password: md5(this.old_password),
					new_password: md5(this.new_password),
				})
				.then((data) => {
					this.$toast.success('修改成功');
					this.$router.push({ path: '/Login' });
				})
				.catch((error) => {
					this.$toast.fail('旧密码错误');
				});
		},
		onFailed(errorInfo) {
			console.log('failed', errorInfo);
		},
		validatorPatternPassword(val) {
			//密码校验
			return this.pattern_password.test(val);
		},
		goSetNewPassword() { //去往忘记密码
			this.$router.push('/ForgetPassword');
		},
	},
};
</script>
<style lang='scss' scoped>
.title {
	display: flex;
	flex-direction: column;
	padding: 0.507246rem 0.531401rem 0.096618rem 0.797101rem;

	span:first-child {
		color: #333333;
	}
}
.form {
	padding: 0 0.89372rem;

	.van-field {
		align-items: center;
		padding: 0;
		border-bottom: 1px solid #e9e9e9;
		margin-top: 1.014493rem;

		&::after {
			border-bottom: 0;
		}
	}

	.forget-old-password-button {
		margin: 1.304348rem 0 0.57971rem 0;
		color: #6899f4;

		p {
			margin: 0;
		}
	}

	.submit-button {
		.van-button--round {
			height: 1.062802rem;
			background-color: #6899f4;

			.van-button__content {
				.van-button__text {
					color: white;
				}
			}
		}
	}
}
</style>